import Vue from 'vue';
import Vuex from 'vuex';
import {SHOW_LOADING, HIDE_LOADING} from './type';

Vue.use(Vuex);

//定义常量【访问状态对象】
const state = {
  loading: false,
  count: 100
}

//定义一个方法（根据常量）
//mutations 是固定的写法，意思是改变[就是要改变值就在此方法里写] 都是通过commit来触发
const mutations = { //触发状态
  [SHOW_LOADING](state) {
    state.loading = true;
  },
  [HIDE_LOADING](state) {
    state.loading = false;
  },
  jia(state, n) {   // n表示参数（可传）
    state.count += n
  },
  jian(state) {
    state.count--
  },
  add(state) {
    state.count++
  },
  reduce(state) {
    state.count--
  }
}

//计算过滤操作(计算属性)
const getters = {}

//actions和Mutations功能基本一样[actions是可以调用Mutations里的方法]
//不同点：actions是异步的改变state的状态，而Mutations是同步改变状态
const actions = {
  //调用add 和 reduce 两个方法
  addAction(context) {  //context上下文对象，代表整个store（下面的Vuex.Store）
    context.commit('add', 5)
  },
  reduceAction({commit}) {  //{commit}直接把commit对象传递过来，可以让方法体逻辑和代码更清晰
    setTimeout(() => {
      commit('reduce')
    }, 1000);
    console.log('我比reduce提前执行')  //也就是打印比数据变化快
  }
}

// 模块组module（声明一个模块把Store里面的值放进去 然后在Store里声明引用）
/*
const moduleA = {
  state,
  mutations,
  getters,
  actions
}

export default new Vuex.Store({
  modules: {
    A: moduleA
  }
})
*/


// 常量模块化（用export default封装代码，让外部可以引用）
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})
